<template>
  <div class="flex">
    <div class="item" v-for="(item, index) in fullData" :key="item.id">
        <Box :boxData="item" :index="index"></Box>
    </div>
  </div>
</template>
<script setup lang="ts">
import Box from '@/components/box.vue'

// import {detectSwipe} from '@/utils/tool/js/detectSwipe.js'
// import request from '@/http'
// import testData from '/wings-nav/test.json'

import { computed, ref } from 'vue'
import { getPolicyList } from '@/api/getData'
import data from '@/assets/data'
import create from '@/assets/main_hook'
const dataRes = ref<any>()
const dataC = computed<any>(() => {
  if(dataRes.value) {
    // return dataRes.value
  }
  return data
})

const {fullData} = create()


// const removeSwipeListener = detectSwipe(
//   function(info, distance, position) {
//     console.log("滑动方向: ", info.direction);
//     console.log("滑动距离: ", distance);
//     console.log("滑动当前手指位置: ", position);
//   },
//   function(info, distance, position) {
//     console.log("松开手时的滑动方向: ", info.direction);
//     console.log("松开手时的滑动距禿: ", distance);
//     console.log("松开手指位置: ", position);
//   },
//   { useObjectParam: true }
// );
</script>
<style scoped lang="scss">
// .box {
//   border: 1px solid pink;
// }
.flex {
  padding: 30px 0 0 0;
  background: #fff url('/psc.jpeg') repeat 50% -500px fixed;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

// @for $i from 0 to 50 {
//   .item:nth-child(#{$i + 1}) :deep(.card):hover {
//     width: 120%;
//     height: 120%;
//     background-color: hsla($i * 45, 100%, 65%, 0.4);
//     transform: perspective(500px) rotateX(25deg) translate3d(-10px, -30px, 50px);
//     box-shadow: 0 35px 35px -8px rgba(0,0,0,0.7);
//     z-index: 10;
//   }
// }


</style>
